const AutoImport = require('unplugin-auto-import/webpack');
const Components = require('unplugin-vue-components/webpack');
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers');
const BundleAnalyzerPlugin =
  require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const path = require('path');
const theme = require('./antd-theme.js');

module.exports = {
  publicPath: '/',
  transpileDependencies: true,

  productionSourceMap: false,
  lintOnSave: false,
  configureWebpack: {
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
      new BundleAnalyzerPlugin(),
    ],
  },
  // devServer: {
  //   open: true,
  //   proxy: {
  //     '/api': {
  //       target: 'http://localhost:5000',
  //       changeOrigin: true,
  //       pathRewrite: {
  //         '^/api': '',
  //       },
  //     },
  //   },
  // },
  chainWebpack: (config) => {
    // 本来打算使用 style-resources-loader 自动注入scss,但是发现对 element 使用的一些 sass 特性支持有点问题
    // const types = ["vue-modules", "vue", "normal-modules", "normal"];
    // types.forEach((type) => addStyleResource(config.module.rule("scss").oneOf(type)));

    // 我也发现了饿了么的样式不对劲

    // 这里改用 sass-resources-loader 注入scss
    const oneOfsMap = config.module.rule('scss').oneOfs.store;
    oneOfsMap.forEach((item) => {
      item
        .use('sass-resources-loader')
        .loader('sass-resources-loader')
        .options({
          // Provide path to the file with resources
          resources: path.resolve(__dirname, './src/styles/preload.scss'),
          hoistUseStatements: true,
        });
    });
  },
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          // 按需定制 antd 主题
          modifyVars: theme,
          javascriptEnabled: true,
        },
      },
    },
  },
};
